<template>
  <el-drawer append-to-body
             :before-close="handleClose"
             :close-on-click-modal="closeOnClickModal"
             custom-class="sidebar-iframe"
             destroy-on-close
             direction="rtl"
             :size="size"
             :title="title"
             :visible.sync="show"
             :withHeader="title"
             @closed="onDialogClosed">
    <iframe class="w-100 h-100 border-0"
            sandbox="allow-scripts allow-forms allow-same-origin"
            seamless="seamless"
            :src="url"></iframe>
  </el-drawer>
</template>

<script lang="ts">
  import { Component, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "JuDrawer",
  })
  export default class extends Vue {
    show = true;
    url = "about:blank";
    title = "";
    size = "30%";
    closeOnClickModal = true;

    beforeClose = done => {
      done();
    };
    onDialogClosed() {
      this.$destroy();
    }
  }
</script>

<style lang="scss" scoped>
  :deep {
    .sidebar-iframe {
      max-width: 95%;
      .el-drawer__body {
        overflow: hidden;
        font-size: 0;
      }
      .el-drawer__header {
        padding-top: 15px;
        padding-bottom: 10px;
        margin-bottom: 10px;
      }
      .el-drawer__close-btn > .el-icon-close {
        transition: all 0.2s;
      }
      .el-drawer__close-btn:hover {
        > .el-icon-close {
          transform: rotate(180deg);
          color: var(--theme-danger);
        }
      }
    }
  }
</style>
